// 先导入变量和基础组件
@use '../_variables' as *;
@use '../_mixins' as *;
@use '../_banner' as *;
@use '../_service' as *;

// Home页面样式
.home {
  // 首页banner
  &-banner {
    // 不使用 @extend，而是直接使用 banner 的样式
    position: relative;
    height: 600px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('@/assets/images/banner-bg.jpg');
    background-size: cover;
    background-position: center;
  }

  // 服务介绍部分
  &-services {
    padding: $spacing-extra-large 0;
    background: $background-color-white;

    &-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: $spacing-large;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
  }

  // 优秀作品展示
  &-works {
    padding: $spacing-extra-large 0;
    background: $background-color-base;

    &-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: $spacing-large;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
  }

  // 数据统计部分
  &-stats {
    padding: $spacing-extra-large 0;
    background: linear-gradient(rgba($primary-color, 0.9), rgba($primary-color, 0.9)), url('@/assets/images/stats-bg.jpg');
    background-size: cover;
    background-position: center;
    color: $background-color-white;

    &-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: $spacing-extra-large;
      text-align: center;
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &-number {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: $spacing-small;
    }

    &-label {
      font-size: $font-size-base;
      opacity: 0.9;
    }
  }
} 